<template>
  <div>
    <!-- Tips组件 -->
    <Tips />

    <!-- 每一项商品 -->
    <van-checkbox-group v-model="result">
      <van-checkbox
        :name="item.id"
        v-for="item in cartList"
        :key="item.id"
        @click="goodsItemClick(item)"
        :disabled="isEditing"
      >
        <van-card
          :num="item.number"
          :price="item.retail_price"
          :title="item.goods_name"
          :thumb="item.list_pic_url"
        />
        <van-stepper
          v-model="item.number"
          v-show="isEditing"
          @change="changeStepperVal(item)"
        />
      </van-checkbox>
    </van-checkbox-group>

    <!-- 编辑栏和提交栏 -->
    <van-submit-bar
      :price="checkedGoodsAmount * 100"
      button-text="提交订单"
      @submit="onSubmit"
    >
      <van-checkbox v-model="checkedAll" :disabled="isEditing"
        >全选</van-checkbox
      >
      <template #tip>
        累计共<span>{{ goodsCount }}</span
        >件商品，可点击
        <van-button
          :type="isEditing ? 'danger' : 'primary'"
          size="small"
          @click="isEditing = !isEditing"
          >{{ isEditing ? "完成编辑" : "编辑" }}</van-button
        >
        按钮进行商品数量修改
      </template>
    </van-submit-bar>
  </div>
</template>

<script>
import { GetCartData, GetgoodsItemData, GetStepper } from "@/request/api";
import Tips from "@/components/AppDetailTips";
export default {
  data() {
    return {
      /* 全选的value值 */
      checked: true,
      /* 每个元素是checkbox-group的每一个checkbox的name属性 */
      result: [],
      // 购物车数据
      cartList: [],
      // 商品总个数
      goodsCount: 0,
      // 商品价格总数
      checkedGoodsAmount: 0,
      // 编辑按钮
      isEditing: false,
    };
  },
  components: {
    Tips,
  },
  methods: {
    // 步进器事件
    changeStepperVal(item) {
      console.log(item);
      GetStepper({
        goodsId: item.goods_id,
        id: item.id,
        number: item.number,
        productId: item.product_id,
      }).then((res) => {
        // console.log(res);
        this.renderData(res.data);
      });
    },
    //   封装数据渲染
    renderData(data) {
      // 清空this.result(否则每次点击商品想，都会push，则this.result将会越来越多)
      this.result = [];
      // 数据渲染
      this.cartList = data.cartList;
      this.goodsCount = data.cartTotal.goodsCount;
      this.checkedGoodsAmount = data.cartTotal.checkedGoodsAmount;
      // 拿到数据后，把checked为1的这一项的id，push 到 result这个数组中去
      // 遍历this.cartList
      this.cartList.map((item) => {
        // checked为1就勾上，不为1，就不勾上
        // id在this.result里面就表示勾上
        item.checked ? this.result.push(item.id) : "";
      });
    },
    onSubmit() {},
    goodsItemClick(item) {
      // 如果点击的时候，isEditing为ture，就return掉(不发送请求)
      if (this.isEditing) return;
      //   console.log("点击");
      // 发起请求
      GetgoodsItemData({
        isChecked: item.checked ? 0 : 1,
        productIds: item.product_id.toString(),
      }).then((res) => {
        console.log(res);
        this.renderData(res.data);
      });
    },
  },
  created() {
    GetCartData().then((res) => {
      this.renderData(res.data);
    });
  },
  computed: {
    checkedAll: {
      get() {
        return this.cartList.length == this.result.length;
      },
      set(val) {
        // 如果点击的时候，isEditing为ture，就return掉(不发送请求)
        if (this.isEditing) return;
        // checkedAll的值发生变化的时候会执行这里的代码，val就是新的值
        let ids = this.cartList.map((item) => {
          return item.product_id;
        });
        console.log(ids.join());
        GetgoodsItemData({
          isChecked: val ? 1 : 0,
          productIds: ids.join(),
        }).then((res) => {
          console.log(res.data);
          this.renderData(res.data);
        });
      },
    },
  },
};
</script>
 
<style lang="less" scoped>
.van-submit-bar {
  bottom: 0.5rem;
}
/deep/.van-checkbox__label {
  flex: 1;
}
.van-submit-bar__tip {
  display: flex;
  align-items: center;
  .van-button {
    margin: 0 0.06rem;
  }
}
.van-checkbox-group {
  background-color: #fff;
  padding: 0.1rem;
  border-bottom: 1px solid #ccc;
}
.van-stepper {
  text-align: right;
}
</style>